<template>
  <div class="echarts-outer-wrapper width-1250">
    <Title title="近5年税源变化趋势"></Title>
    <echartCompt class="echarts" v-model="chartOption" />
  </div>
</template>
<script>
const FullYear = new Date().getFullYear();
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
import * as echarts from "echarts";

export default {
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null, // 图表数据
      allData: null,
      yearData: "2022",
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.init();
    //  this.myChart = echarts.init(this.$refs.echarts);
  },
  computed: {
    chartOption() {
      let barWidth = 18;
      let colorList = [
        "rgba(153, 177, 255, 0.8)",
        "rgba(228, 126, 41, 0.8)",
        "rgba(247,234,32, 0.8)",
        "rgba(36,207,192, 0.8)",
        "rgba(194,194,194, 0.8)",
        "rgba(153, 177, 255, 0.1)",
        "rgba(228, 126, 41, 0.1)",
        "rgba(247,234,32,0.1)",
        "rgba(36,207,192,0.1)",
        "rgba(194,194,194,0.1)",
      ];
      var xdata = ["2019", "2020", "2021", "2022", "2023"];

      var data1 = [500, 600, 400, 550, 500];
      var data2 = [300, 200, 100, 500, 200];
      var data3 = [100, 250, 150, 300, 250];
      var data4 = [200, 300, 150, 300, 400];
      var data5 = [500, 600, 400, 550, 500];
      // if (this.EchartData) {
      //   xdata.map((item, index) => {
      //     data1.push(this.EchartData.tqxqList[index].hjts);
      //     data2.push(this.EchartData.bnxqList[index].hjts);
      //   });
      // }

      let option = {
        color: ["rgba(255, 255, 0, 1)", "rgba(56, 89, 255, 1)"],
        tooltip: echartOption.tooltip({
          formatter: function (params) {
            return [
              `<div style="color:${echartOption.tooltipTextColor}">${params[0].axisValueLabel}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[0]};border-radius:16px"></span>${params[0].seriesName}:${params[0].value}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[1]};border-radius:16px"></span>${params[1].seriesName}:${params[1].value}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[2]};border-radius:16px"></span>${params[2].seriesName}:${params[2].value}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[3]};border-radius:16px"></span>${params[3].seriesName}:${params[3].value}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[4]};border-radius:16px"></span>${params[4].seriesName}:${params[4].value}</div>`,
            ].join("");
          },
        }),
        grid: {
          top: 80,
          left: 48,
          right: 48,
          bottom: 80,
          containLabel: true,
        },
        legend: {
          icon: "roundRect",
          color: "rgba(244, 81, 85, 1)",
          data: ["汇总", "单位", "个体", "新办", "注销"],
          textStyle: {
            fontSize: 18,
            color: "#fff",
          },
        },

        xAxis: {
          type: "category",
          data: xdata,
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(),
          boundaryGap: true,
          // nameTextStyle: {
          //   fontSize: 18,
          // },
        },
        yAxis: {
          type: "value",
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
          splitArea: { show: false },
        },
        series: [
          {
            type: "line",
            name: "单位",
            data: data2,
            smooth: true,

            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: colorList[0],
                    },
                    {
                      offset: 0.8,
                      color: colorList[5],
                    },
                  ],
                  false
                ),
                shadowColor: colorList[0],
                shadowBlur: 6,
              },
            },
          },
          {
            type: "line",
            name: "个体",
            data: data1,
            smooth: true,

            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: colorList[1],
                    },
                    {
                      offset: 0.8,
                      color: colorList[6],
                    },
                  ],
                  false
                ),
                shadowColor: colorList[6],
                shadowBlur: 6,
              },
            },
          },
          {
            type: "line",
            name: "新办",
            data: data3,
            smooth: true,

            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: colorList[2],
                    },
                    {
                      offset: 0.8,
                      color: colorList[7],
                    },
                  ],
                  false
                ),
                shadowColor: colorList[2],
                shadowBlur: 6,
              },
            },
          },
          {
            type: "line",
            name: "注销",
            data: data4,
            smooth: true,

            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: colorList[3],
                    },
                    {
                      offset: 0.8,
                      color: colorList[8],
                    },
                  ],
                  false
                ),
                shadowColor: colorList[3],
                shadowBlur: 6,
              },
            },
          },
          {
            type: "line",
            name: "汇总",
            data: data5,
            smooth: true,

            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: colorList[4],
                    },
                    {
                      offset: 0.8,
                      color: colorList[9],
                    },
                  ],
                  false
                ),
                shadowColor: colorList[4],
                shadowBlur: 6,
              },
            },
          },
        ],
      };

      return option;
    },
  },
  methods: {
    init() {
      this.getData();
      //  this.myChart.clear();
    },
    getData() {
      this.ajax({
        url: "/dpzsGzcxService/sdsjptsjhjqsQuery",
        method: "post",
        data: {
          param: {
            tqnd: FullYear - 1,
            dqnd: FullYear,
          },
        },
      }).then((res) => {
        res = res.data;
        if (res.rtnCode !== "200") {
          this.$message.error(res.rtnMsg);
          return;
        }
        this.EchartData = {
          tqxqList: res.data.tqxqList,
          bnxqList: res.data.bnxqList,
        };
        this.allData = res.data.ndzsList[0];
        this.yearData = [
          this.EchartData.tqxqList[0].ssnd,
          this.EchartData.bnxqList[0].ssnd,
        ];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts-outer-wrapper {
  width: 936px;
  height: calc((1080px - 62px - 28px) / 2);
}
.echarts {
  width: 100%;
  height: calc(100% - 54px);
}
</style>
